<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AI管理后台</title>
    <!-- 引入字体图标 -->
    <!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">-->
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" th:href="@{/css/main.css}" />
    <link rel="stylesheet" th:href="@{/css/sidebar.css}" />
    <link rel="stylesheet" th:href="@{/css/header.css}" />
    <link rel="stylesheet" th:href="@{/css/content.css}" />
    <link rel="stylesheet" th:href="@{/css/responsive.css}" />
    <!-- 引入JavaScript文件 -->
    <script th:src="@{/js/main.js}"></script>
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
  </head>
  <body>
    <!-- 引入侧边栏组件 -->
    <div
      th:replace="~{fragments/sidebar :: sidebar(activeMenu=${activeMenu})}"
    ></div>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 引入头部组件 -->
      <div th:replace="~{fragments/header :: header}"></div>

      <!-- 动态引入内容区域 -->
      <div class="content">
        <div th:replace="~{${contentPage}}"></div>
      </div>
    </div>


    <script>
      document.addEventListener('DOMContentLoaded', function () {
        initMenuToggle();
      });
    </script>
  </body>
</html>
